<template>
  <div>
    child7组件 - {{ msg2 }} - {{ count }} -
    <button @click="handleClick">btn</button>
  </div>
</template>

<script>
import { ref, toRefs } from "vue";
export default {
  props: ["msg", "count"],
  // setup可以接受第一个参数是props
  // setup的第一个参数props，是不能解构的，解构会失去响应式
  // 如果一定要解构，需要在函数体里面使用toRefs来解构

  // setup的第二个参数是context(上下文)
  // context是可以解构的

  // setup里面data，computed，methods，refs (模板 ref)都是拿不到的
  setup(props, { emit }) {
    const { msg } = toRefs(props);
    const msg2 = ref(msg);

    // watch()
    // computed()
    // const add = () => {}

    const handleClick = () => {
      // console.log(count);
      // this.$emit("")
      emit("abc", 888);
      // console.log(context.expose);
    };

    return {
      msg2,
      handleClick,
    };
  },
};
</script>
